<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户手机号">
                <a-input v-model="queryParam.phone" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.paymentType" placeholder="请选择" default-value="0">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="1">增加</a-select-option>
                  <a-select-option value="2">减少</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="getDate">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {phone:'',paymentType:''}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table :columns="columns" :data-source="data">
        <span slot="action" slot-scope="text, record">
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical"/>
          <a>Delete</a>
          <a-divider type="vertical"/>
          <a class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>
        </span>
      </a-table>


      <!--      <s-table-->
      <!--        ref="table"-->
      <!--        size="default"-->
      <!--        rowKey="key"-->
      <!--        :columns="columns"-->
      <!--        :data="loadData"-->
      <!--        :alert="true"-->
      <!--        :rowSelection="rowSelection"-->
      <!--        showPagination="auto"-->
      <!--      >-->
      <!--        <span slot="serial" slot-scope="text, record, index">-->
      <!--          {{ index + 1 }}-->
      <!--        </span>-->
      <!--        <span slot="status" slot-scope="text">-->
      <!--          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />-->
      <!--        </span>-->
      <!--        <span slot="description" slot-scope="text">-->
      <!--          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>-->
      <!--        </span>-->
      <!--      </s-table>-->

      <create-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
      <step-by-step-modal ref="modal" @ok="handleOk"/>
    </a-card>
  </page-header-wrapper>
</template>

<script>
    import moment from 'moment'
    import {STable, Ellipsis} from '@/components'

    import {getHistory} from "../../api/history";

    import StepByStepModal from './modules/StepByStepModal'
    import CreateForm from './modules/CreateForm'

    const columns = [
        {
            title: '#',
            dataIndex: 'id',
            key: 'id',
            scopedSlots: {customRender: 'serial'}
        },
        {
            title: '描述',
            dataIndex: 'description',
            scopedSlots: {customRender: 'description'}
        },
        {
            title: '类型',
            dataIndex: 'paymentType',
            customRender(text) {
                return Number(text)==1?'增加':'减少'
            }
        },
        {
            title: '数量',
            dataIndex: 'sum',
            sorter: true,
            needTotal: true,
            customRender: (text) => text
        },
        {
            title: '用户ID',
            dataIndex: 'userId',
            scopedSlots: {customRender: 'status'}
        },
        {
            title: '用户手机号',
            dataIndex: 'user.phone',
            scopedSlots: {customRender: 'status'}
        },
        {
            title: '用户名',
            dataIndex: 'user.nickName',
        },
        {
            title: '更新时间',
            dataIndex: 'updateAt',
            sorter: true
        }
    ]

    const statusMap = {
        0: {
            status: 'default',
            text: '关闭'
        },
        1: {
            status: 'processing',
            text: '运行中'
        },
        2: {
            status: 'success',
            text: '已上线'
        },
        3: {
            status: 'error',
            text: '异常'
        }
    }

    export default {
        name: 'AdmissionTicket',
        components: {
            STable,
            Ellipsis,
            CreateForm,
            StepByStepModal
        },
        data() {
            this.columns = columns
            return {
                // create model
                visible: false,
                confirmLoading: false,
                mdl: null,
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {
                    phone:'',
                    paymentType:'',
                },
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    console.log('loadData request parameters:', requestParameters)
                    return getTicketHistory(requestParameters)
                        .then(res => {
                            return res.result
                        })
                },
                selectedRowKeys: [],
                selectedRows: [],
                data: [],
                current: 1,
                total: 0,
                pages: 1,
                size: 100000
            }
        },
        filters: {
            statusFilter(type) {
                return statusMap[type].text
            },
            statusTypeFilter(type) {
                return statusMap[type].status
            }
        },
        created() {
            this.getDate()
        },
        computed: {
            rowSelection() {
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        },
        methods: {
            handleAdd() {
                this.mdl = null
                this.visible = true
            },
            handleEdit(record) {
                this.visible = true
                this.mdl = {...record}
            },
            handleOk() {
                const form = this.$refs.createModal.form
                this.confirmLoading = true
                form.validateFields((errors, values) => {
                    if (!errors) {
                        console.log('values', values)
                        if (values.id > 0) {
                            // 修改 e.g.
                            new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    resolve()
                                }, 1000)
                            }).then(res => {
                                this.visible = false
                                this.confirmLoading = false
                                // 重置表单数据
                                form.resetFields()
                                // 刷新表格
                                this.$refs.table.refresh()

                                this.$message.info('修改成功')
                            })
                        } else {
                            // 新增
                            new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    resolve()
                                }, 1000)
                            }).then(res => {
                                this.visible = false
                                this.confirmLoading = false
                                // 重置表单数据
                                form.resetFields()
                                // 刷新表格
                                this.$refs.table.refresh()

                                this.$message.info('新增成功')
                            })
                        }
                    } else {
                        this.confirmLoading = false
                    }
                })
            },
            handleCancel() {
                this.visible = false

                const form = this.$refs.createModal.form
                form.resetFields() // 清理表单数据（可不做）
            },
            handleSub(record) {
                if (record.status !== 0) {
                    this.$message.info(`${record.no} 订阅成功`)
                } else {
                    this.$message.error(`${record.no} 订阅失败，规则已关闭`)
                }
            },
            getDate() {
                let _this = this;
                getHistory({
                    current: _this.current,
                    size: _this.size,
                    type:2,
                    'user.phone':_this.queryParam.phone!==''?_this.queryParam.phone:null,
                    paymentType:_this.queryParam.paymentType!==''?_this.queryParam.paymentType:null
                }).then((res) => {
                    _this.data = res.data.records;
                    _this.current = res.data.current
                    _this.total = res.data.total
                    _this.pages = res.data.pages
                    console.log(res)
                })
            },
            onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            toggleAdvanced() {
                this.advanced = !this.advanced
            },
            resetSearchForm() {
                this.queryParam = {
                    date: moment(new Date())
                }
            }
        }
    }
</script>
